const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 设置dev变量,判断isDev是否为true
const isDev = process.env.NODE_ENV === 'development'
// html的引入
const HTMLPlugin = require('html-webpack-plugin')
// webpack前还需要引入'clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// webpack的引入
const webpack = require('webpack')



// module.exports = {
const config = {
    // webpack-dev
    target: 'web',
    //js入口
    //输入安全路径join(__dirname,)__dirname表示这个目录所在的地址，也就是根路径，他是吧这个路径跟后面的路径拼接起来形成绝对路径，以便访问
    entry: path.join(__dirname, 'src/index.js'),
    //出口,文件输出
    output: {
        // 输出的文件名
        filename: 'bundle.js',
        //输出路径，path，他也用绝对路径
        path: path.join(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // jsx
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            //css配置
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // css预处理器stylus
            {
                test: /\.styl/,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader',
                    {
                        // postcss
                        loader:"postcss-loader",
                        options:{
                            sourceMap:true,
                        }
                    }
                ]
            },
            //图片配置
            {
                test: /\.(gif|jpeg|jpg|png|svg)$/,
                // 可以把图片生成base64，直接写在代码里，不用生成文件
                //  name:'[name]-aaa.[ext]' name就是图片的名字，ext是扩展名字如gif
                use: [
                    {
                        loader: 'url-loader',
                        // 参数传给上面的loader
                        options: {
                            limit: 1024,
                            name: '[name]-aaa.[ext]'
                        }
                    }

                ]
            }
        ]
    },
    // htmlplugin,使用vue一定还要有defineplugin,自己编写代码或者webpack他是判断环境
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),

        new CleanWebpackPlugin(),
        new HTMLPlugin()
    ]

}
// 正式跟开发环境
if (isDev) {
    // 调试代码,映射。
    config.devtool = '#cheap-module-eval-source-map'
    // devsever是2.0才有的
    config.devServer = {
        // 启动的一个服务，这个服务也就是一个端口 
        port: 8080,
        // 本机的内网IP访问以及直接host：127.0.0.1访问，便于别的电脑以及手机的访问
        host: '0.0.0.0',
        // 编译错误,可以直接显示在网页上,便于快速寻找定位错误
        overlay: {
            error: true,
        },
        // 自动打开浏览器
        // open:true
        // 单应用，路由请求过来的地址，都映射到入口 
        // 页面刷新,只刷新当前页面，不会都重新加载
        hot: true
    }
    // 配合上面的页面刷新
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin() //不需要的信息展示
    )
}
module.exports = config